<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素属性content</title>
		<style>
			.web-development{
				padding: 0 1em;
				border-radius: 1em;
				background-color: lavender;
				box-shadow: 0.3em 0.3em 1em hsla(0, 0%, 70%, 0.8);
			}
			.web-development p{
				font-size: 30px;
				font-family: sans-serif;
				font-weight: bold;
				color: slateblue;
			}
			.web-development p::before, .web-development p::after{
				color: tomato;
			}
			.web-development .html::before{
				content: '<';
			}
			.web-development .html::after{
				content: '/>';
			}
			.web-development .css::before{
				content: '.';
			}
			.web-development .css::after{
				content: '::';
			}
			.web-development .js::before{
				content: '{';
			}
			.web-development .js::after{
				content: '}';
			}
			
			/* 第二种方式 */
			.web-development p::before{
				content: attr(data-before);
			}
			.web-development p::after{
				content: attr(data-after);
			}
			
		</style>
	</head>
	<body>
		<!-- <div class="web-development">
			<p class="html">html</p>
			<p class="css">css</p>
			<p class="js">javascript</p>
		</div> -->
		<!-- 第二种方式 -->
		<div class="web-development">
			<p data-before="&lt" data-after="/&gt">html</p>
			<p data-before="." data-after="::">css</p>
			<p data-before="{" data-after="}">javascript</p>
		</div>
	</body>
</html>
